<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->

<div class="br-8" style="background-color: snow; padding: 20px; box-shadow: 7px 5px #b421cc">
  <form nz-form [formGroup]="form" (ngSubmit)="submit()" role="form">
    <nz-tabset [nzAnimated]="false" class="tabs" (nzSelectChange)="switch($event)">
      <nz-tab [nzTitle]="'app.login.tab-login-credentials' | i18n">
        <nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>
        <nz-form-item>
          <nz-form-control [nzErrorTip]="'app.login.message-need-identifier' | i18n">
            <app-multi-func-input
              size="large"
              prefixIcon="user"
              formControlName="userName"
              [placeholder]="'app.login.message-need-identifier' | i18n"
            />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control [nzErrorTip]="'app.login.message-need-credential' | i18n">
            <app-multi-func-input
              size="large"
              type="password"
              prefixIcon="lock"
              formControlName="password"
              [placeholder]="'app.login.message-need-credential' | i18n"
            />
          </nz-form-control>
        </nz-form-item>
        <nz-alert
          *ngIf="needUpdatePassword"
          [nzType]="'warning'"
          [nzMessage]="showPasswdChange"
          [nzShowIcon]="true"
          class="mb-lg"
        ></nz-alert>
        <ng-template #showPasswdChange>
          <a href="https://hertzbeat.apache.org/docs/start/account-modify" target="_blank">
            <span>
              {{ 'app.login.need-change-password' | i18n }}
              <svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" style="margin-left: 4px">
                <path
                  fill="currentColor"
                  d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"
                ></path>
              </svg>
            </span>
          </a>
        </ng-template>
        <nz-form-item>
          <nz-col [nzSpan]="12">
            <label nz-checkbox formControlName="remember">{{ 'app.login.remember-me' | i18n }}</label>
          </nz-col>
        </nz-form-item>
        <nz-form-item>
          <button nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="loading" nzBlock>
            {{ 'app.login.login' | i18n }}
          </button>
        </nz-form-item>
      </nz-tab>
    </nz-tabset>
  </form>
</div>
